<template>
	<!--热门主播组件-->
	<div class="home-module">
		<div class="home-list-card">
			<div class="list-header">
					<div class="header-left">
						<div class="list-header-img"></div>
						<p class="header-title">热门主播</p>
					</div>
				<div class="header-right">
					<p class="header-more" @click="clickHomeModluNore">更多</p>
					<Iconfont iconClass="iconfont iconyoujiantou1" />
				</div>
			</div>
			<div class="home-list-connect">
				<ul>
						<li v-for="(v,index) in list" :key='index' @click="goToAnchorPage(v.contentType,v.id)">
							<img :src="v.zbHeadImg+'?x-oss-process=image/resize,m_fixed,h_230,w_230'" />
							<p class="li-title">{{v.title}}</p>
							<div class="li-intor">
								<p>{{v.zbIntro}}</p>
							</div>
						</li>
				</ul>
			</div>
		</div>

	</div>
</template>

<script>
	//roomStatus 0预告 1开播  2 关播
	export default {
		props: {
			list: Array,
			typeCom: String,
		},
		data() {
			return {
			}
		},
		computed: {},
		created() {
		},
		mounted() {
		},
		methods: {
			clickHomeModluNore() {
				if(this.typeCom == 'live') {
					this.$router.push(`/${this.$channel}/liveComMore`);
				} else { //主播风采
					this.$router.push(`/${this.$channel}/anchorComMore`);
				}
			},
			goToLive(anchor, roomId) {
				this.$router.push(`/${this.$channel}/live_particulars/${anchor}/${roomId}/liveMsg`);
			},
			 goToAnchorPage(type, connect) { //跳转主播详情页面
				if(type === '1') { //内容 
					this.$router.push({
						path: `/${this.$channel}/connectShow`,
						query: {
							id: connect
						}
					});
				} else if(type === '2') { //视频 
                    this.$router.push({
						path: `/${this.$channel}/videoMiddleBgBlackPlay`,
						query: {
							id: connect
						}
					});
				} else {
					console.log('暂无明星主播类型')
				}
			}
		}
	};
</script>

<style scoped="scoped">
	.home-list-card {
		width: 690px;
		height: 461px;
		background: white;
		border-radius: 12px;
		margin: 20px auto;
		overflow: hidden;
	}
	
	.list-header {
		width: 690px;
		height: 88px;
		/*background: darkgray;*/
		border-radius: 12px 12px 0 0;
		display: flex;
		align-items: center;
	}
	
	.header-left,
	.header-right {
		height: 88px;
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.header-right {
		justify-content: flex-end;
		margin-right: 20px;
	}
	
  .header-left {
    margin-left: 20px;
  }
	
	.header-title {
		height: 29px;
		font-size: 30px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 23px;
	}
	
	.header-more {
		font-size: 22px;
		font-weight: 300;
		color: rgba(102, 102, 102, 1);
		line-height: 40px;
		margin-right: 6px;
	}
	
	.home-list-connect {
		width: 100%;
		height: 370px;
		/*background: saddlebrown;*/
		/*overflow: hidden;*/
		margin-top: 5px;
	}
	
	.home-list-connect ul {
		width: 690px;
		height: 370px;
		white-space: nowrap;
		overflow-y: hidden;
		padding-left: 20px;
		overflow-x: scroll;
    /*background: black;*/
		display:flex;
	}

  .list-header-img {
    width: 9px;
    height: 40px;
    background: linear-gradient(-50deg,rgba(254,73,69,1) 25%,rgba(255,135,110,1) 47%,rgba(255,132,106,1) 100%);
    box-shadow: 0px 0px 4px 0px rgba(255,135,109,0.76);
    border-radius: 5px;
  }

	.home-list-connect ul li {
		width: 250px;
		height: 380px;
		/*background: pink;*/
		/*height:80px;*/
		display: inline-block;
		padding-right: 20px;
		position: relative;
	}
	
	.home-list-connect ul li img {
		width: 230px;
		height: 230px;
		border-radius: 8px;
	}
	
	.li-title {
		max-width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 18px;
		/*background: seagreen;*/
		padding-left: 6px;
		margin-bottom: 10px;
	}
	
	.li-intor {
		width: 100%;
		height: 64px;
		color: #999999;
		line-height: 32px;
		padding-left: 6px;
		white-space: pre-wrap;
		font-size: 24px;
		/*text-align: justify;*/
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.li-intor p{
		width: 100%;
		height: 64px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.live-status {
		width: 88px;
		height: 28px;
		background: linear-gradient(0deg, rgba(204, 45, 48, 1), rgba(247, 127, 108, 1));
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		text-align: center;
		line-height: 30px;
		font-size: 18px;
		border-radius: 4px 0px 4px 0px;
	}
	
	.live-status-yg {
		width: 88px;
		height: 28px;
		background: linear-gradient(0deg, rgba(0, 127, 216, 1), rgba(0, 184, 217, 1));
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		text-align: center;
		line-height: 30px;
		font-size: 18px;
		border-radius: 4px 0px 4px 0px;
	}
</style>